<template>
	<view class="renli">
		<!-- 头部组件 -->
		<view class="topNavWarp">
			<NavBar>
				<template #center>
					<view class="tabWrap">
						<view class="tabItem" :style="{ backgroundColor: cur === i ? '#fff' : 'transparent' }" v-for="(v, i) in tabList" key="i" @tap="tabClick(i,v)">
							<text>{{ v.name }}</text>
						</view>
					</view>
				</template>
			</NavBar>

			<view class="tabNav">
				<text :style="{ color: curIndex === i ? '#6B64D3' : '#8C8C8C' }" v-for="(v, i) in tabNavList" key="i" @tap="tabNavClick(i,v)">{{ v.name }}</text>
			</view>
		</view>

		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
			<listItemVue  @itemClick="jumpItem" :item="item" v-for="(item, index) in list" key="index" />
		</mescroll-body>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import NavBar from '@/components/navBar.vue';
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import listItemVue from './components/listItem.vue';
import { getEmployerWorkList } from '@/utils/api/homeServer';

const cur = ref(0);
const curIndex = ref(0);
const list = ref([]);
const walletType = ref('MONTHLY_SETTLEMENT');
const queryType = ref('BOSS');

/**
 * BOSS("BOSS", "雇佣者"),
 * EMP("EMP", "服务者");
 */
// private String queryType;
const tabList = ref([
	{ id: 1, name: '雇主',value:'BOSS' },
	{ id: 2, name: '服务者',value:'EMP'  }
]);

const tabNavList = ref([
	{ id: 1, name: '月结算', value: 'MONTHLY_SETTLEMENT' },
	{ id: 2, name: '日结', value: 'DAILY_SETTLEMENT' },
	{ id: 3, name: '单算', value: 'SINGLE_SETTLEMENT' }
]);

const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);

const jumpItem = (val:any) => {
	console.log(val);
	if(val.dataType === "BOSS"){
		// 职位详情
		uni.navigateTo({
			url: `/pages/jobHunting/jobDetail?data=${JSON.stringify(val)}`
		})
	}else{
		// 简历详情
		uni.navigateTo({
			url:'/pages/recruit/detail?id=' + val.userId
		})
	}
}

const upCallback = (mescroll: any) => {
	getEmployerWorkList({
		data: {
			pageNo: mescroll.num,
			pageSize: mescroll.size,
			walletType: walletType.value,
			queryType: queryType.value,
		}
	})
		.then((res) => {
			console.log(res.data);
			const curPageData = res.data.list || []; // 当前页数据
			if (mescroll.num == 1) list.value = []; // 第一页需手动制空列表
			list.value = list.value.concat(curPageData); //追加新数据
			//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
			//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;

			//方法一(推荐): 后台接口有返回列表的总页数 totalPage
			mescroll.endByPage(curPageData.length, res.data.pages); //必传参数(当前页的数据个数, 总页数)

			//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
			// console.log(res.data.data.total);
			// mescroll.endBySize(curPageData.length, res.data.data.total); //必传参数(当前页的数据个数, 总数据量)

			//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
			//mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

			//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
			// mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		})
		.catch(() => {
			mescroll.endErr();
		});
};

const tabClick = (index: any,item:any) => {
	cur.value = index;
	queryType.value = item.value
	downCallback()
	
};

const tabNavClick = (index: any,item: any) => {
	console.log(item.value)
	curIndex.value = index;
	walletType.value = item.value
	downCallback()
};
</script>

<style lang="scss" scoped>
:deep(.navBarTop) {
	background-color: transparent;
	// color: #fff;
}

page {
	background-color: #f4f6fa;
}

.topNavWarp {
	background-image: url('@/static/img/homeServer/navbg_renli.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.tabWrap {
	display: flex;
	background: rgba(107, 100, 211, 0.2);
	border-radius: 8rpx;
	padding: 8rpx 12rpx;

	.tabItem {
		border-radius: 12rpx;
		padding: 8rpx 0;
		width: 120rpx;
		text-align: center;

		text {
			font-size: 22rpx;
		}
	}
}

.tabNav {
	display: flex;
	padding: 36rpx 0 24rpx 0;

	text {
		flex: 1;
		text-align: center;
	}
}
</style>
